<template>
    <view class="container">
        <view class="header">
            <image class="header-bg" src="@/images/static/index_bg.png"></image>
            <text class="header-desc"><text class="header-name">Lin UI </text>原生小程序组件库</text>
        </view>

        <view class="main">
            <navi-card
                v-for="(naviConfig, index) in naviConfigs.baseConfig"
                :key="index"
                :title="naviConfig.title"
                :icon="naviConfig.icon"
                @click="onNaviCard(naviConfig)"
            />
        </view>
    </view>
</template>

<script>
import NaviCard from "@/components/navi-card.vue"
import naviConfigs from "./navi"
import tabbar from '../tabbar'

export default {
    components: {
        NaviCard,
    },
    data() {
        return {
            naviConfigs,
            list: tabbar
        }
    },
    methods: {
        onNaviCard(e) {
            let { title, navigateMark } = e
            uni.navigateTo({
                url: "/pages/navigator/content/index?title=" + title + "&navigatemark=" + navigateMark,
            })
        },
    },
}
</script>

<style scoped>
body {
    background: #f7f7f7;
}

.container {
    min-height: 100vh;
    width: 100%;
    background: #f7f7f7;
    padding-bottom: 60rpx;
}

.header {
    font-size: 28rpx;
    height: 228rpx;
    width: 750rpx;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    line-height: 36rpx;
    background: #3683d6;
    border-radius: 0 0 20rpx 20rpx;
    box-shadow: 0px 4px 20px 0px rgba(0, 49, 107, 0.3);
    box-sizing: border-box;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 228rpx;
    z-index: 1;
}

.header-desc {
    position: absolute;
    z-index: 2;
    font-size: 28rpx;
    margin: 60rpx 0 0 60rpx;
    line-height: 48rpx;
}

.header-name {
    font-size: 32rpx;
}

.main {
    display: flex;
    flex-wrap: wrap;
    width: 690rpx;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between;
}

.shop-card {
    padding: 30rpx 40rpx !important;
    margin-top: 30rpx !important;
    margin-bottom: 200rpx !important;
}

.card-img {
    width: 100rpx !important;
    height: 100rpx !important;
}

.card-title {
    color: #3963bc !important;
}

.shop-dec {
    font-size: 28rpx;
    color: #8c98ae;
    margin-top: 15rpx;
}
</style>